import { createSlice } from '@reduxjs/toolkit'
import { componentsData } from '../../mock/data'
const todosSlice = createSlice({
    name: 'todos',
    initialState: {
        data: 123,
        // 侧边栏组件数据[]
        componentsData: componentsData,
        //存放画布全部拖得元素
        componentList: [] as any,
        currentcomponent: null,
        //显示右键删除按钮
        showMenu: false,//false 不去显示   true=》显示
        menuLfet: 0,//右键点击的left
        menuTop: 0,//右键点击的top
        color: {
            r: 255, g: 255, b: 255, a: 1.0
        },
    },
    reducers: {
        //讲拖得元素添加到画布
        addIterm(state, item) {
            state.componentList.push(item)
        },
        //设置为选中
        setIterm(state, item) {
            // console.log(item,'selectitem')
            state.currentcomponent = item.payload
        },
        // 右击删除
        delIterm(state: any) {
            const index = state.componentList.findIndex((item: any) => item.payload.id == state.currentcomponent.id)
            console.log(index, '要删除组件得下标')
            state.componentList.splice(index, 1)
            state.showMenu = false
        },
        //改变showMenu得状态 获取右键点击的left和top
        changeshowmenu(state, data) {
            // console.log(data,'data')
            state.menuLfet = data.payload.left
            state.menuTop = data.payload.top
            state.showMenu = true
        },
        //关闭右键菜单
        closemenus(state) {
            state.showMenu = false
        },
        //更新组件元素left和top
        updateIterm(state: any, data) {
            // console.log(data,'data')
            state.currentcomponent.style = {
                ...state.currentcomponent.style,
                ...data.payload
            }
        },
        // 改变尺寸（宽高）
        changeSize(state: any, { payload }: any) {
            // 首先检查 state.currentcomponent 是否存在
            if (state.currentcomponent) {
                const index = state.componentList.findIndex((item: any) => item.payload.id === state.currentcomponent.id);
                // 确保找到了匹配的组件索引
                if (index !== -1) {
                    // 设置宽度
                    state.componentList[index].payload.style = { ...state.componentList[index].payload.style, ...payload }
                }
            }
        },
        // 主题颜色
        thumeColor(state: any, item: any) {
            console.log(item.payload.rgb, 'item');
            state.color = item.payload.rgb
        },
        //清空画布
        alldel(state) {
            state.componentList = []
        },
        //把裁剪的图片更新到仓库里
        updateImage(state: any, data) {
            console.log(data, 'updateImage')
            const index = state.componentList.findIndex((item: any) => item.payload.id == state.currentcomponent.id)
            // console.log(index,'index')
            state.componentList[index].payload.style = {
                ...state.componentList[index].payload.style,
                ...data.payload
            }
            state.componentList[index].payload.propLable = data.payload.image
        },
        //把扣图结果 插入到画布里
        addimagecanvas(state: any, data) {
            console.log(data, 'addimagecanvas')
            //找到抠图图片下标
            const index = state.componentList.findIndex((item: any) => item.payload.id == state.currentcomponent.id)
            // console.log(index,'index')
            state.componentList[index].payload.propLable = data.payload
        },
        goPublish(state: any, { payload }) {
            state.componentList = payload
        }
    }
})


export const { addIterm, setIterm, updateIterm, changeSize, thumeColor, alldel, updateImage, delIterm, changeshowmenu, closemenus, addimagecanvas, goPublish } = todosSlice.actions
export default todosSlice.reducer